<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>popover | anni-ui</title>
    <link rel="stylesheet" href="../vars.css">
    <link rel="stylesheet" href="../demo.css">
    <link rel="stylesheet" href="../icon/icon.css">
    <link rel="stylesheet" href="popover.css">

    <style>
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .demo-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 50px;

            &>li {
                padding: 10px;
                border: 1px solid;
                cursor: pointer;
            }
        }
    </style>
</head>

<body>
    <ul class="demo-list">
        <li data-placement="top-start">
            <div>top-start</div>
        </li>
        <li data-placement="top">
            <div>top</div>
        </li>
        <li data-placement="top-end">
            <div>top-end</div>
        </li>
        <li data-placement="right-start">
            <div>right-start</div>
        </li>
        <li data-placement="right">
            <div>right</div>
        </li>
        <li data-placement="right-end">
            <div>right-end</div>
        </li>
        <li data-placement="bottom-start">
            <div>bottom-start</div>
        </li>
        <li data-placement="bottom">
            <div>bottom</div>
        </li>
        <li data-placement="bottom-end">
            <div>bottom-end</div>
        </li>
        <li data-placement="left-start">
            <div>left-start</div>
        </li>
        <li data-placement="left">
            <div>left</div>
        </li>
        <li data-placement="left-end">
            <div>left-end</div>
        </li>
    </ul>
    <script type="module">
        import { ready, qs, qsa, each, addEvent } from '../utils.js';
        import { popover } from './popover.js';
        ready(() => {
            each(qsa('ul li'), (el) => {
                // console.log(el);
                const placement = el.dataset.placement;
                const _popover = popover.open(el, {
                    content: `<div id="bizPopover">
                            <h1>How to Use</h1>
                            <ul>
                                <li>Step 1: Click Try it!</li>
                                <li>Step 2: Enter parameter: URL (up to 10 per run)</li>
                                <li>Step 3: Click Start and then select Run in Web Browser or Run in Cloud</li>
                            </ul>
                        </div>`,
                    classNames: 'aaaaaaaa',
                    styles: {},
                    placement,
                    opened() {
                        console.log('opened');
                    },
                    closed() {
                        console.log('closed');
                    }
                });

                addEvent(el, 'click', (e) => {
                    console.log(el);
                    _popover.toggel();
                });
            });
        });
    </script>
</body>

</html>